<template>
  <div class="app-container">
    <div class="filter-container" >
      <addPage/>
      <!--<addPage></addPage>-->
      <moveTo/>
    </div>

    <tree-table :data="data" :eval-func="func" :eval-args="args" :expand-all="expandAll" border>
      <el-table-column label="id">
        <template slot-scope="scope">
          <span >{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="类名">
        <template slot-scope="scope">
          <span >{{ scope.row.class_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="排序值">
        <template slot-scope="scope">
          <span >{{ scope.row.sort }}</span>
        </template>
      </el-table-column>
      <el-table-column label="名字">
        <template slot-scope="scope">
          <span >{{ scope.row.nickname }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.status == 0"><el-button type="warning" plain size="mini">禁用</el-button></span>
          <span v-if="scope.row.status == 1"><el-button type="success" plain size="mini">正常</el-button></span>
          <span v-if="scope.row.status == 2"><el-button type="warning" plain size="mini">待审核</el-button></span>
          <span v-if="scope.row.status == 3"><el-button type="warning" plain size="mini">审核未通过</el-button></span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <editPage :row_data="scope.row"/>
          <el-button type="danger" icon="el-icon-delete" circle title="删除" class="buttoncss" @click="del(scope.row.id)"/>
          <!--<moveTo v-bind:row_data="scope.row" @getLists="getLists"></moveTo>-->
          <!--<rolePage v-bind:row_data="list"></rolePage>-->
        </template>
      </el-table-column>
    </tree-table>

  </div>
</template>

<script>
/**
  Auth: Lei.j1ang
  Created: 2018/1/19-14:54
*/
import '@/styles/buttonStyle.css'
import treeTable from '@/components/TreeTable'
import treeToArray from './customEval'
import { get_Tree_list, del } from '@/api/article/category'
import { getList } from '@/api/shop_admin_auth/shopRole'
import addPage from './addPage'
import editPage from './editPage'
import moveTo from './moveTo'
import store from '@/store'

export default {
  name: 'CustomTreeTableDemo',
  components: { treeTable, addPage, editPage, moveTo },
  data() {
    return {
      func: treeToArray,
      expandAll: true,
      data: [],
      list: null,
      total: null,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        name: undefined,
        role: undefined
      },
      args: [null, null, 'left']
    }
  },
  created: function() {
    this.getRoles()
    this.getLists()
  },
  methods: {
    getLists() {
      this.listLoading = true
      get_Tree_list(store.getters.token, this.listQuery).then(res => {
        if (res.data.status) {
          this.data = res.data.data
        } else {
          this.$message.error(res.data.msg)
        }
        this.listLoading = false
      })
    },
    getRoles() {
      this.listLoading = true
      getList(store.getters.token, this.listQuery).then(response => {
        this.list = response.data.list.data
        this.total = response.data.list.total
        this.listLoading = false
        // console.log(this.list)
      })
    },
    del(id) {
      this.$confirm('操作将会删除该记录,是否继续', '提示', {
        confirmButtonText: '是',
        cancelButtonText: '否',
        type: 'warning'
      }).then(() => {
        del(store.getters.token, { id: id }).then(res => {
          this.$message({
            type: 'success',
            message: '成功!'
          })
          this.getLists()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '失败!'
        })
      })
    }
  }
}
</script>
